<style lang="scss" scoped>

</style>
<template>
  <page-box>
    <div class="ui-search-box" slot="search-form">
      <el-form class="ui-search-form" label-width="120px" :model="params" ref="form">
        <el-form-item label="权限id" prop="permissionId">
          <el-input size="mini" class="ui-item-reset" clearable v-model="params.permissionId"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input size="mini" class="ui-item-reset" clearable v-model="params.name"></el-input>
        </el-form-item>
        <el-form-item label="路径url" prop="url">
          <el-input size="mini" class="ui-item-reset" clearable v-model="params.url"></el-input>
        </el-form-item>
        <el-form-item label="接口标识" prop="perms">
          <el-input size="mini" class="ui-item-reset" clearable v-model="params.perms"></el-input>
        </el-form-item>
        <el-form-item label="每页数据">
          <el-select size="mini" class="ui-item-reset" v-model="params.pageSize">
            <el-option label="5" :value="5"></el-option>
            <el-option label="10" :value="10"></el-option>
            <el-option label="20" :value="20"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="ui-search-btus">
        <el-button type="primary" size="mini" @click="getData">搜索</el-button>
        <el-button  size="mini" @click="resetForm('form')">重置</el-button>
      </div>
    </div>
    <div class="ui-list ui-box" slot="list-box">
      <div class="box-header ui-list-header">
        <div>权限列表</div>
        <div>
<!--          <el-button type="primary" size="mini" @click="exportExcel">导出</el-button>-->
          <el-button type="primary" size="mini" @click="open">新增</el-button>
        </div>
      </div>
      <el-table v-loading="tabLoading" :data="dataList" @selection-change="handleSelectionChange"
                :cell-style="cellStyle" :header-cell-style="rowClass">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.children" v-if="props.row.children.length>0"
                      @selection-change="handleSelectionChange" :cell-style="cellStyle" :header-cell-style="rowClass">
<!--              <el-table-column type="selection" width="55"></el-table-column>-->
              <el-table-column prop="permissionId" label="权限id"></el-table-column>
              <el-table-column prop="name" label="名称"></el-table-column>
              <el-table-column prop="url" label="路径"></el-table-column>
              <el-table-column prop="description" label="描述"></el-table-column>
              <el-table-column prop="perms" label="权限标识"></el-table-column>
              <!--              <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>-->
              <!--              <el-table-column prop="updateTime" label="更新时间" show-overflow-tooltip></el-table-column>-->
              <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                  <el-button type="primary" icon="el-icon-check" circle size="mini" v-if="scope.row.status==1"></el-button>
                  <el-button type="danger" icon="el-icon-close" circle v-else size="mini"></el-button>
                </template>
              </el-table-column>

              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" @click="checkDetail(scope.row)">详情</el-button>
                  <el-button size="mini" type="danger" @click="deleteItem(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div v-else  style="color:#AE3939;">
              此{{props.row.routerName}}暂无子级
            </div>
          </template>
        </el-table-column>
<!--        <el-table-column type="selection" width="55"></el-table-column>-->
        <el-table-column prop="permissionId" label="权限id"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="url" label="路径"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column prop="perms" label="权限标识"></el-table-column>
        <!--              <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>-->
        <!--              <el-table-column prop="updateTime" label="更新时间" show-overflow-tooltip></el-table-column>-->
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-check" circle size="mini" v-if="scope.row.status==1"></el-button>
            <el-button type="danger" icon="el-icon-close" circle v-else size="mini"></el-button>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="checkDetail(scope.row)">详情</el-button>
            <el-button size="mini" type="danger" @click="deleteItem(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="ui-pagination"
        @current-change="changPageNum"
        layout="total, prev, pager, next"
        :current-page="this.params.pageNum"
        :page-size="this.params.pageSize"
        :total="total"
        :hide-on-single-page="true">
      </el-pagination>
      <add-item v-bind:permsItem.sync='permsItem' @submit="addItem" ref="addPerm"></add-item>
    </div>
  </page-box>
</template>
<script>
  import pageBox from '@/components/pageBox'
  import addItem from '@/components/permissions/addItem.vue'

  export default {
    name: 'permissionsList',
    components: {
      pageBox, addItem
    },
    data() {
      return {
        dataList: [],
        exportList: [],
        permsItem: {
          permissionId: '',
          name: '',
          parentId: '0',
          url: '',
          perms: '',
          status: '1',
          description: '',
          type: '0',
          orderNum: '0',
        },
        tabLoading: false,
        params: {
          permissionId: '',
          name: '',
          url: '',
          perms: '',
          pageNum: 1,
          pageSize: 10,
        },
        total: 0,
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData() { // 将后台返回的无规则路由进行树形处理
        post('/pms_api/permission/list').then(res => {
          let routerList = res.data
          let routersTmp = []
          if (routerList != null && routerList !== undefined && routerList != '') { // 找出最顶层
            for (let index in routerList) {
              if (routerList[index].parentId == 0) {
                routersTmp.push(routerList[index])
              }
            }
            for (let index in routersTmp) {
              routersTmp[index].children = []
            }
            for (let index in routerList) { // 找出除了最顶层的所有层
              if (routerList[index].parentId != 0) {
                for (let idx in routersTmp) {
                  if (routersTmp[idx].permissionId == routerList[index].parentId) {
                    routersTmp[idx].children.push(routerList[index])
                    break;
                  }
                }
              }
            }
            // 排序
            routersTmp.sort((pre, back) => {
              if (parseInt(pre.orderNum) < parseInt(back.orderNum)) {
                return -1
              } else if (parseInt(pre.orderNum) > parseInt(back.orderNum)) {
                return 1
              } else {
                return pre.url.localeCompare(back.url);
              }
            })
            for (let index in routersTmp) {
              if (routersTmp[index].children) {
                routersTmp[index].children.sort((pre, back) => {
                  if (parseInt(pre.orderNum) < parseInt(back.orderNum)) {
                    return -1
                  } else if (parseInt(pre.orderNum) > parseInt(back.orderNum)) {
                    return 1
                  } else {
                    return pre.url.localeCompare(back.url);
                  }
                })
              }
            }
            this.dataList = routersTmp
            console.log(routersTmp)
          }
        }).catch(err => {
          this.$message.error('获取角色路由失败')
        })
      },
      addItem() {
        if (this.permsItem.parentId === 0) {
          this.permsItem.type = 0
        }else {
          this.permsItem.type = 1
        }
        post('/pms_api/permission/add', this.permsItem).then(res => {
          this.$refs.addPerm.addDialogVisible = false;
          this.getData();
        }).catch(err => {
          console.log(err)
        })
      },
      changPageNum(val) {
        this.params.pageNum = val
        this.getData()
      },
      open() {
        // this.addDialogVisible=!this.addDialogVisible
        this.$refs.addPerm.openWindow('新增权限')
      },
      checkDetail(item) {
        this.$router.push({
          path: '/permissionsDetail',
          query: {
            title: item.name,
            id: item.permissionId
          }
        })
      },
      deleteItem(item) {
        post('/pms_api/permission/delete', {'permissionId': item.permissionId}).then(res => {
          this.getData()
        }).catch(err => {
          console.log(err)
        })
      },
      handleSelectionChange(val) {
        this.exportList = val
      },
      exportExcel() {
        // 暂时无法完成 xlsx
        this.$message.warning(`抱歉，无法导出`)
      },
      //表格居中
      cellStyle({row, colum, rowIndex, columIndex}) {
        return "text-align: center";
      },
      rowClass({row, rowIndex}) {
        return "text-align: center";
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.getData()
      },

    }
  }
</script>


